import React from 'react';
import "@/style/Chat.scss"
import wry from '@/assets/roles/wry.jpg'
import player from '@/assets/roles/player.jpg'
import voice from '@/assets/voices/7d0bb86cd02d1587a4fcee1734015aba.mp3'

function LeftDom(props) {
  // console.log(document.getElementsByTagName('audio'));
  var timer = '2'
  setTimeout(() => {
    timer = document.getElementsByTagName('audio')[0]? document.getElementsByTagName('audio')[0].duration: '1'
  }, 0)
  return (
    <div className="messageLine">
      {props.type === 'text'? (
        <div>
          <div className="portrait"><img src={wry} alt="portrait" width="30"></img></div>
          <div className="messageLine_context">{props.context}</div>
        </div>
      ):(
        <div>
          <div className="portrait"><img src={wry} alt="portrait" width="30"></img></div>
          <div className="messageLine_context">{Math.floor(timer)+' "'}</div>
        </div>
      )}
      <div className="clear"></div>
    </div>
  )
}
function RightDom(props) {
  return (
    <div className="messageLine">
      <div className="portrait_player"><img src={player} alt="portrait" width="30"></img></div>
      <div className="messageLine_context_player">{props.context}</div>
      <div className="clear"></div>
    </div>
  )
}

class Chat extends React.Component {
  constructor(props) {
    super(props)
    this.state= {
        role: this.props.role,
        chatList: [
          {position: 'left',type: 'text',context:'_φ(❐_❐✧ 人丑就要多读书'},
          {position: 'right',type: 'text',context:'(*▼ｰ(｡-_-｡)画风不对，如何相爱'},
          {position: 'left',type: 'text',context:'(=￣ω￣=)喵了个咪'},
          {position: 'right',type: 'text',context:'<(￣ ﹌ ￣)@m  '},
          {position: 'left',type: 'video',context:''},
          {position: 'right',type: 'text',context:'<(￣ ﹌ ￣)@m2  '},
          {position: 'left',type: 'video',context:''},
          {position: 'right',type: 'text',context:'<(￣ ﹌ ￣)@m4  '},
          {position: 'left',type: 'video',context:''},
        ]
    }
    this.myRef = React.createRef() // 获取输入框的dom
    this.sendMessage = this.sendMessage.bind(this)
    this.sendKeyDown = this.sendKeyDown.bind(this)
  }
  setRole(role) {
    const roleList = {}
    if(role === 'wry') {
      roleList.name = '闻人语'
    }
    return roleList
  }
  sendMessage(){
    const text = this.myRef.current.innerText
    // console.log(text);
    if(text) {
      this.setState({
        chatList: this.state.chatList.concat({
          position: 'right',type: 'text',context: text
        })
      })
      setTimeout(() => {
        const div = document.getElementById("chatMainId")
        div.scrollTop = div.scrollHeight + 100;
        this.myRef.current.innerText = ''
      }, 0);
    }
  }
  sendKeyDown(e){
    // console.log(e.keyCode);
    if(e.keyCode === 13) {
      e.preventDefault();
      e.stopPropagation();
      this.sendMessage()
    }
  }
  render() {
    const { name } = this.setRole(this.state.role)
    return (
      <div className="chatContainer">
        <div style={{position:'fixed',left:'0',top:'0'}}>
          <audio src={voice} autoPlay="autoplay" controls ref={this.myVoice}>
        　　<track kind="captions" />
        　　您的浏览器不支持 audio 元素。
          </audio>
        </div>
        <div className="chatTitle">
          <div className="chatName">
            <span className="status">{ name }</span>
            <span className="status online"><i className="light onlineColor"></i>online</span>
            <i className="iconfont icon-video-fill right"></i>
            <i className="iconfont icon-a-addresslist-fill right"></i>
            <i className="iconfont icon-a-folderon-fill right"></i>
          </div>
        </div>
        <div className="chatMain" id="chatMainId">
          <ul className="chatMessage">
            {this.state.chatList.map((item,i) => (
              <li key={item.context+i}>
                {
                  item.position==='left'?
                    <LeftDom context={item.context} role={this.state.role}  type={item.type}/>:
                    <RightDom  context={item.context} />
                }
              </li>
            ))}
          </ul>
        </div>
        <div className="chatSend">
          <i className="iconfont icon-a-face4-fill expression"></i>
          <i className="iconfont icon-tupian pic"></i>
          <div 
            className="placeholderDiv" 
            suppressContentEditableWarning  
            contentEditable="true" 
            placeholder="点击输入消息"
            ref={this.myRef}
            onKeyDown= {this.sendKeyDown}
          >
          </div>
          <i className="iconfont icon-fasong send" onClick={this.sendMessage}></i>
        </div>
      </div>
    )
  }
}

export default Chat